<!--
  -- 描述：报备统计时间轴
  -- 标签参数：cid（必填，ID，用来方法里区分统计图）、prepType、startTime、endTime、timeType、chartTitle、subText
  --
  -- 作者：cyq
  -- 时间：2018/10/22 10:14
-->
<template>
  <div style="position: relative;width: 100%;height: 100%;">
    <div :id="cid" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
  // 引入 ECharts 主模块
  import echarts from 'echarts/lib/echarts'
  import 'echarts/theme/shine'
  // 引入统计图类
  import 'echarts/lib/chart/line'
  // 引入提示框和标题组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'

  export default {
    name: "PrepCountLine",
    props: ['cid','startTime','endTime','prepType','timeType','chartTitle','subText'],
    data() {
      return {
        // 统计图对象
        chartObj: null,
        // 查询统计参数
        params: {
          startTime: this.startTime||this.$moment().subtract(24, 'hours').format('MM-DD HH时'),
          endTime: this.endTime||this.$moment().format('MM-DD HH时'),
          prepType: this.prepType,
          timeType: this.timeType||'hour',
          timeFormat: this.timeFormat||'mm-dd hh24"时"'
        },
        //
        dataList: [],
        timeTypeFormat: {
          'hour': {showformat: 'MM-DD HH时', format: 'mm-dd hh24"时"'},
          'day': {showformat: 'YYYY-MM-DD',format: 'yyyy-mm-dd'},
          'month': {showformat: 'MM月',format: 'mm"月"'},
          'year': {showformat: 'YYYY年',format: 'yyyy"年"'}
        }
      }
    },
    mounted: function(){
      window.addEventListener('resize',() => this.resize(), false);
    },
    beforeDestroy: function(){
      window.removeEventListener('resize', this.resize(), false);
    },
    methods: {
      resize: function(){
        if(this.chartObj)
          this.chartObj.resize()
      },
      query: function(){
        if(this.prepType)
          this.params.prepType = this.prepType;
        if(this.timeType) {
          this.params.timeType = this.timeType;
          let _thisType = this.timeTypeFormat[this.timeType];
          this.params.timeFormat = _thisType.format;

          if(this.startTime)
            this.params.startTime = this.$moment(this.startTime).format(_thisType.showformat);
          if(this.endTime)
            this.params.endTime = this.$moment(this.endTime).format(_thisType.showformat);
        }

        this.api.post('/preparation/countPrepForLine', this.params)
          .then((data) => {
            if(data.code===200){
              this.dataList = data.data;
              this.initChart();
            }else{
              this.$message.error(data.message);
            }
          });
      },
      initChart() {
        let _totalList = [];
        let _labelList = [];
        this.dataList.forEach((item) => {
          _labelList.push(item.DT);
          _totalList.push(item.TOTAL);
        });

        if(!this.chartObj)
          this.chartObj = echarts.init(document.getElementById(this.cid));

        let option = {
          tooltip: {
            // position: function (pt) {
            //   return [pt[0], '10%'];
            // }
            trigger: 'axis',
            confine: true,
            axisPointer: {
              type: 'cross',
              snap: true
            }
          },
          title: {
            textStyle: {
              fontWeight: 'bold'
            },
            text: this.chartTitle||'报备警力趋势图',
            subtext: this.subText||'24小时'
          },
          grid: {
            left: 40,
            right: 40
          },
          toolbox: {
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            // boundaryGap: false,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#5793f3'
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return '报备警力  ' + params.value
                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                }
              }
            },
            data: _labelList
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            axisPointer: {
              snap: true
            }
          },
          dataZoom: [{
            type: 'inside'
          }, {
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],
          series: [
            {
              name:'警力数量',
              type:'line',
              smooth:true,
              symbol: 'none',
              sampling: 'average',
              itemStyle: {
                color: 'rgb(255, 70, 131)'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                }, {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }])
              },
              data: _totalList
            }
          ]
        };

        this.chartObj.setOption(option);
      }
    }
  }
</script>

<style scoped>

</style>
